<script>
    $(document).ready(function () {
        $("#myTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
<style>
    table td, table th {
        vertical-align: middle;
        height: 50px;
        text-align: center;
        font-size: 12px;
    }

    #all {
        background-color: #9cd053;
    }

    h2.title {
        display: block;
        margin: auto;
    }
</style>


<div>
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#main">Main</a></li>
        <li><a data-toggle="tab" href="#stats" ng-click="initStatsPage()">Stats</a></li>
        <li><a data-toggle="tab" href="#retention" ng-click="initRetentionPage()">Retention</a></li>
        <!--<ul class="dropdown-menu">-->
        <!--<li><a data-toggle="tab" href="#dropdown1">Dropdown1</a></li>-->
        <!--<li><a data-toggle="tab" href="#dropdown2">Dropdown2</a></li>-->
        <!--</ul>-->
    </ul>

    <div class="tab-content">

        <!--MAIN-->
        <div class="tab-pane active" id="main">

            <h2 class="title">Main</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="main.comm"
                            ng-change="getGraph(main.comm, main.startDate, main.endDate)">
                        <option value="">全部</option>
                    </select><br/>

                    <div class="col-xs-1">
                        <label class="control-label">开始时间:</label>
                        <input type="text" id="startDate" data-provide="datepicker"
                               class="form-control datepicker" data-date-format="yyyy-mm-dd"
                               ng-model="main.startDate">
                    </div>
                    <div class="col-xs-1">
                        <label class="control-label">结束时间:</label>
                        <input type="text" id="endDate" data-provide="datepicker"
                               class="form-control datepicker" data-date-format="yyyy-mm-dd"
                               ng-model="main.endDate">
                    </div>
                    <button id="submitChart" type="submit" class="btn btn-primary"
                            ng-click="getGraph(main.comm, main.startDate, main.endDate)">搜索
                    </button>
                    <button class="btn btn-secondary" ng-click="refreshMainGraphs()"><span
                            class="glyphicon glyphicon-refresh"></span></button>
                    <!--<button style="margin-left: 20px;" class="btn-secondary btn-sm" ng-click="printOut()">ViewCacheStatus</button><br>-->
                    <!-- -->
                </form>
            </div>
            <div>
                <!--<span style='font-weight:bold'>总用户数/总V用户数 不包括400/500/600/700小号</span><br/>-->
                <span id="loadingMainText" style="color:red; text-align: center"></span>
            </div>
            <div>
                <table>
                    <thead></thead>
                    <tbody>
                    <tr ng-repeat="(commId, commName) in commsInGraph">
                        <td>{{commName}}</td>
                        <td>
                            <button class="glyphicon glyphicon-remove" ng-click="removeCommInGraphs(commId)"></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="chartDisplay" style="width: 100%">

            </div>
        </div>
        <!-- -->
        <!--CHARTS-->
        <div class="tab-pane" id="stats">
            <h2 class="title">Stats</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">大区名称：</label>
                    <select ng-options="dis.objId as dis.groupName for dis in districtList"
                            ng-model="input.district" id="option_dq" ng-change='getDistrictComms(input.district)'>
                        <option value="">-- 请选择大区 --</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <label class="control-label">小区名称：</label>
                    <!--<label ng-repeat="comm in communityList">-->
                    <!--<input style="zoom:1.5;margin-left: 10px;vertical-align:middle"-->
                    <!--type="checkbox" ng-click="communityToggle(comm.objId, input.date)"/>{{comm.communityName}}-->
                    <!--</label><br/><br/>-->
                    <select ng-options="comm.objId as comm.communityName for comm in communityList"
                            ng-model="input.community" id="option_xq" ng-change='getReport(input.community, input.date)'>
                        <option value="">-- 请选择小区 --</option>
                    </select><br/>

                    <label class="control-label">数据：</label>
                    <label ng-repeat="(k,v) in columns">
                        <input style="zoom:1.2;margin-left: 10px;vertical-align:middle"
                               type="checkbox" checked ng-click="columnToggle(input.community, input.date, k)"
                               ng-checked="displayedColumns.indexOf(k) > -1"/>{{v}}
                    </label><br/>
                    <!--<select ng-options="k as v for (k,v) in columns" ng-model="input.column" id = "option_col" required ng-change = 'getReport(input.community, input.date, input.column)'>-->
                    <!--<option value="">&#45;&#45; 请选择数据 &#45;&#45;</option>-->
                    <!--</select><br/>-->

                    <label class="control-label">日期：</label>
                    <!--<select ng-options="week for week in weeklyColumn" ng-model="input.date" id="option_date"-->
                            <!--ng-change='getNewDateReport(input.date)'>-->
                        <!--<option value="">Today</option>-->
                    <!--</select>-->
                    <input type="text" ng-model="input.date" style="" value="" placeholder="yyyy-MM-dd hh:mm:ss">
                    <button style="margin-left: 20px;" type="submit" class="btn-primary btn-sm" ng-click="getNewDateReport(input.date)">搜索</button><br>

                    <ul class="nav nav-pills">
                        (新增 + 活跃度)
                        <li role="presentation" class="active"><a href="" ng-click="setDateInterval(7)"
                                                                  data-toggle="tab">周</a></li>
                        <li role="presentation"><a href="" ng-click="setDateInterval(1)" data-toggle="tab">日</a>
                        </li>
                    </ul>
                </form>
            </div>
            <!--<button style="margin-left: 20px;" class="btn-secondary btn-sm" ng-click="printOut()">ViewCacheStatus-->
            <!--</button>-->
            <!--<br>-->

            <table class="table table-condensed">
                <thead>
                <tr id="columndisplay">
                    <!--<th style="width:15px"></th>-->
                    <th>大区</th>
                    <th>小区</th>
                    <th id="date">日期</th>
                </tr>
                </thead>
                <tbody id="datadisplay">
                <!--<tr id="datadisplay" ng-repeat="(comm, data) in reportingData">-->
                <!--<td>{{comm}}</td>-->
                <!--<td id="rowDate">{{date}}</td>-->
                <!--<td></td>{{data[date][column]}}-->
                <!--</tr>-->
                </tbody>
            </table>

        </div>

        <!--retention-->
        <div class="tab-pane" id="retention">
            <h2 class="title">Retention</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称：</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="input3.comm"
                            required ng-change="getRetentionReport(input3.comm)">
                        <option value="">全部</option>
                    </select>
                </form>
            </div>
            <div>
                <p>开始时间：<span id="retentionStart"></span>&nbsp;&nbsp;到：<span id="retentionEnd"></span></p>
                <span id="loadingRetentionText"></span>
                <button class="btn btn-secondary" ng-click="refreshRetentionRates()"><span
                        class="glyphicon glyphicon-refresh"></span></button>

                <div>
                    <table>
                        <thead></thead>
                        <tbody>
                        <tr ng-repeat="(commId, commName) in commsInRetention">
                            <td>{{commName}}</td>
                            <td>
                                <button class="glyphicon glyphicon-remove"
                                        ng-click="removeCommInRetention(commId)"></button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="retentionCharts" style="width: 100%">
                    <div id="weeklyRetentionChart" style="height: 400px; width: 70%; display: block; margin: auto;">
                    </div>
                    <div id="monthlyRetentionChart" style="height: 400px; width: 70%; display: block; margin: auto;">
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<script>
    function removeRow(e) {
        var commId = e.parentNode.parentNode.id
        $("#" + commId).remove()
        delete communityIndex[commId]
    }
</script>